﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="lib/xspreadsheet.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="lib/xspreadsheet.js"></script>
    <script type="text/javascript">
        var data;
        $(function () {
            load();
            $("#btnCreateTable").click(function () {
                data = $.parseJSON($("#txtJson").val());
                var formWidgets = data.data.formTemplate.formWidgets;
                for (var formItem in formWidgets) {

                }
            });
        });
        function load() {
            x.spreadsheet('#x-spreadsheet-demo')
                .loadData({
                    freeze: 'C3',
                    styles: [
                        {
                            bgcolor: '#f4f5f8',
                            textwrap: true,
                            color: '#900b09',
                            border: {
                                top: ['thin', '#0366d6'],
                                bottom: ['thin', '#0366d6'],
                                right: ['thin', '#0366d6'],
                                left: ['thin', '#0366d6'],
                            },
                        },
                    ],
                    merges: [
                        'C3:D4',
                    ],
                    rows: {
                        1: {
                            cells: {
                                0: { text: 'testingtesttestetst' },
                                2: { text: 'testing' },
                            },
                        },
                        2: {
                            cells: {
                                0: { text: 'render', style: 0 },
                                1: { text: 'Hello' },
                                2: { text: 'haha', merge: [1, 1] },
                            }
                        },
                        8: {
                            cells: {
                                8: { text: 'border test', style: 0 },
                            }
                        }
                    },
                }).change((cdata) => console.log(cdata));
        }
    </script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        /*        body {
            width: 100%;
            margin: 0;
            padding: 15px;
        }

        #box {
            width: 90%;
        }*/
    </style>
</head>
<body>
    <div id="box">
        <div class="btns-tools">
            <button id="btnCreateTable">生成表</button>
        </div>
        <textarea id="txtJson" rows="10" cols="20" style="width:99%"></textarea>
        <div id="x-spreadsheet-demo"></div>

    </div>
</body>
</html>